/**
useContext  是 React 中的一个 Hook，用于在函数组件中访问上下文（Context）。上下文提供了一种方式，可以在组件树中传递数据，而不必通过每层组件的 props 进行传递。
  1. 基本概念
  - 上下文（Context）：上下文是 React 提供的一种机制，用于在组件之间共享数据，如主题、用户信息等。
  -  useContext ：是一个 Hook，允许你在函数组件中访问上下文的值。

  2. 使用方式
   1. 创建上下文

  首先，使用  React.createContext()  创建一个上下文对象：
  import React, { createContext } from 'react';

  const MyContext = createContext();
   2. 提供上下文
  使用  Context.Provider  组件来提供上下文的值：
  const App = () => {
    const value = { name: 'John', age: 30 };

    return (
      <MyContext.Provider value={value}>
        <ChildComponent />
      </MyContext.Provider>
    );
  };
   3. 使用  useContext 
  在子组件中使用  useContext  来访问上下文的值：
  import React, { useContext } from 'react';

  const ChildComponent = () => {
    const context = useContext(MyContext);
    
    return (
      <div>
        <h1>Name: {context.name}</h1>
        <h2>Age: {context.age}</h2>
      </div>
    );
  };
  3. 常见用法
  - 主题管理：在应用中共享主题设置，如颜色和字体。
  - 用户信息：在组件树中共享用户登录状态或信息。
  - 语言设置：在多语言应用中共享当前语言设置。

  4. 注意事项
  - 性能：当上下文的值发生变化时，所有使用该上下文的组件都会重新渲染。要注意性能，避免不必要的渲染。
  - 嵌套上下文：可以嵌套多个上下文，使用多个  useContext  来访问不同的上下文值。

  5. 总结
  useContext  是一个强大的 Hook，用于在函数组件中访问上下文。通过使用上下文，可以在组件树中轻松共享数据，避免了逐层传递 props 的繁琐。理解  useContext  的使用方式和场景，可以帮助开发者更好地管理组件之间的状态和数据。
 */
import React, { memo, useContext } from 'react'
import { UserContext, ThemeContext } from './context'

const App = memo(() => {
  const user = useContext(UserContext)
  const theme = useContext(ThemeContext)

  return (
    <div>
      <h1>{user.name} - {user.age}</h1>
      <p style={{color: theme.color}}>useContext  是 React 中的一个 Hook，用于在函数组件中访问上下文（Context）</p>
    </div>
  )
})

export default App